<template>
  <vxe-grid ref="table" v-bind="gridOptions" v-on="gridEvents">
    <template #option="{ row }">
      <template class="table-option">
        <vxe-button status="primary" content="编辑"
                    @click="editRowEvent(row)"/>
        <vxe-button status="danger" content="删除"
                    @click="deleteRowEvent(row)"/>
      </template>
    </template>
  </vxe-grid>
  <WebMenuEdit ref="edit" @ok="saveSuccess"/>
</template>

<script>
import {deleteWebMenuByCode, exportWebMenuFile, getWebMenuListPage, importWebMenuFile} from "@/api/sys/webMenu";
import {getDictMap, getFile} from "@/util";
import WebMenuEdit from "./SysWebMenuEdit.vue";
import {RESPONSE_CODE_SUCCESS} from "@/constant/response";
import {Message} from "view-ui-plus";

export default {
  name: "SysWebMenuMgr",
  components: {WebMenuEdit},
  data() {
    return {
      yesNoDict: undefined,
      gridOptions: {
        toolbarConfig: {
          buttons: [
            {code: 'add', name: '新增'},
            {code: 'customExport', name: '导出'},
            {code: 'customImport', name: '导入'}
          ],
        },
        pagerConfig: {
          pageSize: 10
        },
        columns: [
          {type: 'checkbox', width: 50, fixed: "left"},
          {type: 'seq', width: 60},
          {field: 'code', title: '编码', minWidth: 100},
          {field: 'name', title: '名称', minWidth: 100},
          {field: 'showName', title: '展示名称', minWidth: 100},
          {field: 'orderValue', title: '排序值', minWidth: 70},
          {field: 'pageUri', title: '路径', minWidth: 100},
          {field: 'father.name', title: '父菜单名称', minWidth: 100},
          {field: 'father.code', title: '父菜单编码', minWidth: 100},
          {field: 'menuStatus', title: '状态', formatter: this.formatterMenuStatus, minWidth: 60},
          {field: 'remark', title: '备注', minWidth: 100},
          {title: '操作', width: 150, slots: {default: 'option'}, fixed: "right"}
        ],
        formConfig: {
          items: [
            {field: 'likeName', title: '名称：', itemRender: {name: 'input'}},
            {field: 'likeCode', title: '编码：', itemRender: {name: 'input'}},
            {field: 'likeFatherCode', title: '父菜单编码：', itemRender: {name: 'input'}},
            {field: 'likePageUri', title: '路径：', itemRender: {name: 'input'}},
            {itemRender: {name: '$button', props: {content: '查询', type: 'submit', status: 'primary'}}},
            {itemRender: {name: '$button', props: {content: '重置', type: 'reset'}}}
          ]
        },
        proxyConfig: {
          ajax: {
            query: ({page, form}) => {
              return getWebMenuListPage({
                pageIndex: page.currentPage,
                pageSize: page.pageSize,
                ...form
              })
            }
          }
        }
      },
      gridEvents: {
        toolbarButtonClick: this.toolbarButtonClick,
      },
    }
  },
  created() {
    this.$nextTick(() => {
      getDictMap("YesNo:EnableDisable").then(res => {
        this.yesNoDict = res.get("YesNo:EnableDisable")
        this.$refs.table.commitProxy('reload')
      })
    });
  },
  methods: {
    deleteRowEvent(row) {
      this.$Modal.confirm({
        title: '删除菜单',
        content: '确认删除菜单?<br/> 名称:' + row.name + '<br/>编码:' + row.code,
        okText: '删除',
        onOk: () => {
          deleteWebMenuByCode({
            menuCode: row.code
          }).then(res => {
            if (res.code == RESPONSE_CODE_SUCCESS) {
              this.$refs.table.commitProxy('reload')
              Message.success("删除成功")
            }
          })
        }
      })
    },
    editRowEvent(row) {
      this.$refs.edit.show({
        title: "修改菜单",
        data: this.$utils.clone(row)
      })
    },
    toolbarButtonClick({code}) {
      switch (code) {
        case 'add': {
          this.$refs.edit.show({
            title: "添加菜单"
          })
          return;
        }
        case 'customExport': {
          this.exportWebMenu()
          return;
        }
        case 'customImport': {
          this.importWebMenu();
          return;
        }
        default: {
          return
        }
      }
    },
    importWebMenu() {
      getFile('.json').then(res => {
        let formData = new FormData()
        formData.append("file", res);
        importWebMenuFile(formData).then(res => {
          if (res.code !== RESPONSE_CODE_SUCCESS) {
            return
          }
          this.$refs.table.commitProxy('reload')
          Message.success("导入成功")
        })
      })
    },
    exportWebMenu() {
      let rows = this.$refs.table.getCheckboxRecords();
      console.log(rows)
      let ids = [];
      for (let item of rows) {
        ids.push(item.id)
      }
      if (ids.length <= 0) {
        Message.warning("至少选择一条数据")
        return
      }
      exportWebMenuFile({
        ids: ids
      });
    },
    saveSuccess() {
      this.$refs.table.commitProxy('reload')
    },
    formatterMenuStatus({cellValue}) {
      if (this.yesNoDict) {
        return this.yesNoDict.dataMap.get(cellValue).name
      }
      return cellValue
    }
  }
}
</script>

<style scoped>

</style>
